<template>
  <el-dialog
    title="选择审批人员"
    append-to-body
    :visible.sync="chooseDialog"
    :close-on-click-modal="false"
    @open="openLoad"
    :before-close="closeChooseDialog"
    width="60%"
    class="choose_approve_user_dialog"
  >
    <avue-crud :option="zsoption"
               :data="zsdata"
               :page.sync="zspage"
               v-model="zsform"
               ref="zscrud"
               @search-change="zssearchChange"
               @search-reset="zssearchReset"
               @selection-change="zsselectionChange"
               @current-change="zscurrentChange"
               @size-change="zssizeChange"
               @refresh-change="zsrefreshChange"
               @on-load="zsonLoad">
      <template slot="yxq" slot-scope="scope">
        <span>{{yxqFormatter(scope.row.yxqq, scope.row.yxqz)}}</span>
      </template>
    </avue-crud>
    <!-- 按钮 -->
    <div class="choose_approve_user_footer">
      <el-button
        type="primary"
        size="small"
        @click="confirmChooseApproveUser()">
        确 定
      </el-button>
      <el-button
        size="small"
        @click="closeChooseDialog()">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {getList} from "@/api/jypx/edutrainarchive/trainarchive";
  import {getzylxList} from "@/api/xcgl/basejob";
  import moment from 'moment';

  export default {
    props: {
      chooseDialog: {default: false},
      selectedZS: {default: []},
      zylxType:{default:true},
    },
    data() {
      return {
        zsform: {},
        zsquery: {},
        zsloading: true,
        zspage: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        zsselectionList: [],
        zsdata:[],
        zsoption: {
          menu:false,
          height: 'auto',
          labelWidth: 100,
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          refreshBtn:false,
          addBtn:false,
          border: true,
          index: true,
          editBtn:false,
          viewBtn:false,
          delBtn:false,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "人员名称",
              prop: "rymc",
              align: "center",
              search: true,
              rules: [{
                required: true,
                message: "请输入人员名称",
                trigger: "blur"
              }]
            },
            {
              label: "作业类型",
              align: "center",
              prop: "zylx",
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=edu_train_archive_zylx",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number"
            },
            {
              label: "证书名称",
              align: "center",
              prop: "zsmc"
            },
            {
              label: "证书编号",
              align: "center",
              prop: "zsbh"
            },
            {
              label: '有效期',
              align: "center",
              prop: 'yxq',
              width: 160,
              slot: true,
              display: false
            },
          ]
        },
      };
    },
    computed: {
      ids() {
        let ids = [];
        this.zsselectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    mounted(){
    },
    methods: {
      openLoad(){
        this.zsonLoad(this.zspage, this.zsquery);
      },
      // 确定选择证书
      confirmChooseApproveUser() {
        if(this.zsselectionList.length === 0) {
          this.$message.warning("请选择至少一个证书!");
          return;
        }
        var zsList=[]
        this.zsselectionList.forEach(zs=>{
          var zsL={
            id:zs.id,
            rymc:zs.rymc,
            zylx:zs.zylx,
            zsbh:zs.zsbh
          }
          zsList.push(zsL)
        })
        this.$emit('confirmChooseZS', zsList);
        this.zsselectionClear()

      },
      // 关闭、取消选择证书
      closeChooseDialog() {
        this.zsselectionClear()
        this.$emit('closeChooseDialog');
      },
      yxqFormatter: (startValidData, endValidData) => {
        return moment(startValidData).format('YYYY-MM-DD') + "~" + moment(endValidData).format('YYYY-MM-DD');
      },
      zssearchReset() {
        this.zsquery = {};
        this.zsonLoad(this.zspage);
      },
      zssearchChange(params, done) {
        this.zsquery = params;
        this.zspage.currentPage = 1;
        this.zsonLoad(this.zspage, params);
        done();
      },
      zsselectionChange(list) {
        this.zsselectionList = list;
      },
      zsselectionClear() {
        this.zsselectionList = [];
        this.$refs.zscrud.toggleSelection();
      },
      zscurrentChange(currentPage) {
        this.zspage.currentPage = currentPage;
      },
      zssizeChange(pageSize) {
        this.zspage.pageSize = pageSize;
      },
      zsrefreshChange() {
        this.zsonLoad(this.zspage, this.zsquery);
      },
      zsonLoad(page, params = {}) {
        this.zsloading = true;
        if (this.zylxType) {
          params.zylx=this.zylx
          getList(page.currentPage, page.pageSize, Object.assign(params, this.zsquery)).then(res => {
            const data = res.data.data;
            this.zspage.total = data.total;
            this.zsdata = data.records;
            this.zsloading = false;
            this.zsselectionClear();
          });
        }else {
          this.zsdata=[]
        }
      },
    }
  }
</script>
<style lang="scss" scpoed>
  .choose_approve_user_footer {
    text-align: center;
    margin-top: 15px;

    .el-button {
      width: 100px;
      height: 35px;
    }
  }
</style>
